<template>
    <el-menu
      :default-active="$route.path"
      router
      background-color="#fff"
      active-text-color="#20bfa3"
      class="el-menu-vertical-demo"
      @select="handleMenuSelect"
    >
      <el-menu-item
        v-for="item in menuList.filter(i => !i.children)"
        :key="item.path"
        :index="item.path"
      >
        <el-icon><component :is="item.icon" /></el-icon>
        <span>{{ item.title }}</span>
      </el-menu-item>
      <el-sub-menu
        v-for="item in menuList.filter(i => i.children)"
        :key="item.path + '-submenu'"
        :index="item.path"
      >
        <template #title>
          <el-icon><component :is="item.icon" /></el-icon>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item
          v-for="child in item.children"
          :key="child.path"
          :index="child.path"
        >
          <span>{{ child.title }}</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { useRoute } from 'vue-router'
  import { User, Plus, List, Message, Document, Star, Edit, UserFilled } from '@element-plus/icons-vue'
  
  const props = defineProps({
    role: String
  })
  
  const menuList = computed(() => {
    if (props.role === 'teacher') {
      return [
        { path: '/teacher/add-topic', title: '新增课题', icon: Plus },
        {
          path: '/teacher/topic-list',
          title: '课题列表管理',
          icon: List,
          children: [
            { path: '/teacher/topic-list/approved', title: '已审核课题' },
            { path: '/teacher/topic-list/pending', title: '待审核课题' }
          ]
        },
        { path: '/teacher/message', title: '消息管理', icon: Message },
        { path: '/teacher/progress', title: '进度列表管理', icon: Document }
      ]
    } else if (props.role === 'student') {
      return [
        { path: '/student/my-topic', title: '我的课题', icon: Star },
        { path: '/student/topic-select', title: '课题选择', icon: Edit },
        { path: '/student/message', title: '消息管理', icon: Message },
        { path: '/student/progress', title: '进度管理', icon: Document }
      ]
    } else if (props.role === 'admin') {
      return [
        { path: '/admin/student-list', title: '学生列表管理', icon: UserFilled },
        { path: '/admin/teacher-list', title: '教师列表管理', icon: UserFilled },
        { path: '/admin/topic-list', title: '课题列表管理', icon: List },
        { path: '/admin/message', title: '消息管理', icon: Message },
        { path: '/admin/user-list', title: '用户列表管理', icon: User }
      ]
    }
    return []
  })

  const emit = defineEmits(['add-topic'])

  function handleMenuSelect(index) {
    if (index === '/teacher/add-topic') {
      emit('add-topic')
    } else {
      // 其他菜单项正常跳转
    }
  }
  </script>